import { FC, useState, useEffect } from "react";
import { Space, Table, Tag, Divider, Radio, } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import React from 'react';
import style from "./index.module.scss"
import { Pagination, PaginationProps } from 'antd';




const ABtable: FC<{
    columns: any[],
    data: any[],
    // page: number | string,
    // size: number | string,
    total: number,
    page: number,
    pageSize: number
    onchange: (pageNumber: number, pageSize: number) => void,
}> = ({ columns, data, onchange, total, pageSize, page }) => {

    //分页
    const onChange: PaginationProps['onChange'] = (pageNumber, pageSize) => {
        console.log(pageNumber, pageSize);
        onchange(pageNumber, pageSize)
    };

    const rowSelection = {
        onChange: (selectedRowKeys: React.Key[], selectedRows: any[]) => {
            console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
        },
        getCheckboxProps: (record: any) => ({
            disabled: record.name === 'Disabled User', // Column configuration not to be checked
            name: record.name,
        }),
    };
    const [selectionType, setSelectionType] = useState<'checkbox' | 'radio'>('checkbox');
    return (

        <div className={`${style["a-table"]} box-pd`}>
            <Radio.Group
                onChange={({ target: { value } }) => {
                    setSelectionType(value);
                }}
                value={selectionType}
            >
                <Radio value="checkbox">Checkbox</Radio>
                <Radio value="radio">radio</Radio>
            </Radio.Group>
            <Table
                rowSelection={{
                    type: selectionType,
                    ...rowSelection,
                }}
                pagination={false}
                columns={columns}
                dataSource={data} />

            <Pagination
                showQuickJumper
                defaultCurrent={1}
                total={total}
                pageSize={pageSize}
                current={page}
                onChange={onChange}
                pageSizeOptions={[5, 10, 20]}
            />
            {/* <Pagination showQuickJumper defaultCurrent={2} total={500} onChange={onChange} disabled /> */}
        </div>
    )
}

export default ABtable